<template>
    <div>
      <jxf-titletip :title="title" @refreshPage="refreshFuc" :hasGoBack="true" @goBack="$emit('goBack')"></jxf-titletip>
      <el-card class="jxf-table-card mt20">
        <div slot="header" class="clearfix">
          <span>数据列表</span>
        </div>
        <jxf-table class="" :table="dataTable">
          <template slot="status" slot-scope="scope">
            <div v-if="scope.row.status == '1'">申请通过</div>
            <div v-if="scope.row.status == '2'">申请驳回</div>
          </template>
          <template slot="score" slot-scope="scope">
            <el-row class="flexScore">
              <el-col :span="20">
                <el-rate v-model="scope.row.star" disabled></el-rate>
              </el-col>
              <el-col :span="4">
               <span style="margin-top: -10px"> {{scope.row.score}}</span>
              </el-col>
            </el-row>
          </template>
          <template slot="createTime" slot-scope="scope">
            <div>{{scope.row.createTime ? FormatDate.timeFormat(scope.row.createTime) : ""}}</div>
          </template>
          <template slot="proof" slot-scope="scope">
            <div v-if="scope.row.status == '2'">
              {{scope.row.proof}}
            </div>
            <div v-else>
              <viewer :images="scope.row.proof ? scope.row.proof.split(',') : []">
                <el-row>
                  <el-col :span="12" v-for="(item, index) in scope.row.proof ? scope.row.proof.split(',') : []" :key="index">
                    <img :src="item">
                  </el-col>
                </el-row>

              </viewer>
            </div>
          </template>
        </jxf-table>
      </el-card>
    </div>
</template>

<script>
  import FormatDate from '@/assets/js/formatDate'
    export default {
        name: "BillRepaymentDetail",
        props: {
          dataInfo: {
            type: Object,
            default: () => {}
          }
        },
        data() {
          return {
            title: "审核记录",
            FormatDate: FormatDate,
            dataTable: {
              border:true,
              loading:false,
              hasSelect:false,
              tr: [
                {
                  id: '1',
                  label: '采购商企业名称',
                  fixed: "left",
                  prop: 'enterpriseName'
                },
                {
                  id: '2',
                  label: '联系电话',
                  prop: 'tel'
                },
                {
                  id: '3',
                  label: '评分级别',
                  prop: 'score',
                  show: 'template',
                  width: '200'
                },
                {
                  id: '4',
                  label: '操作结果',
                  prop: 'status',
                  show: 'template'
                },
                {
                  id: '5',
                  label: '凭证/驳回反馈',
                  prop: 'proof',
                  width: 240,
                  show: 'template'
                },
                {
                  id: '6',
                  label: '操作人员',
                  prop: 'auditName'
                },
                {
                  id: '7',
                  label: '操作时间',
                  show: 'template',
                  prop: 'createTime'
                }
              ],
              data: this.dataInfo ? this.dataInfo.list : []
            },
            // scoce: this.dataTable.data ? this.dataTable.data[0].score : '0'
          }
        },
        methods: {
          refreshFuc() {
            let data = {
              repayId: this.dataInfo.repayId
            }
            ajax.get(apis.factory.repayAuditRecord, data).then(res => {
              if(res.code == "10000000") {
                this.dataTable.data = []
                this.dataTable.data.push(res.data)
              } else {
                this.$message.error(res.message)
              }
              this.dataTable.loading = false
            })
          }
        }
      }
</script>

<style scoped>
.flexScore {
  display: flex;
  justify-content: center;
  align-items: center;
}
  img {
    width: 100px;
    height: 100px;
  }
</style>
